'use client'
import React from 'react'
import { useForm } from 'react-hook-form'
import { Button } from "@/components/ui/button"
import { zodResolver } from '@hookform/resolvers/zod'
import * as z from 'zod'

interface LoginFormInputs {
  email: string
  password: string
}

const loginSchema = z.object({
  email: z.string().min(1, "邮箱不能为空").email('必须邮箱格式'),
  password: z.string().min(6, '密码必须大于6位'),
})

const LoginForm: React.FC = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<LoginFormInputs>({
    resolver: zodResolver(loginSchema),
  })
  const onSubmit = (data: LoginFormInputs) => {
    // 处理提交逻辑
    console.log(data)
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div className='pb-6'>
        <label htmlFor="email">邮箱</label>
        <input
          id="email"
          type="email"
          {...register('email')}
        />
        {errors.email && <p className='text-red-500 text-xs '>{errors.email.message}</p>}
      </div>

      <div className='pb-6'>
        <label htmlFor="password">密码</label>
        <input
          id="password"
          type="password"
          {...register('password')}
        />
        {errors.password && <p className='text-red-500 text-xs '>{errors.password.message}</p>}
      </div>

      <Button type="submit">Login</Button>
    </form>
  )
}

export default LoginForm